<div class="apply-ware-warehousing">
    <div nz-row nzGutter="10" class="row_1">
        <div nz-row class="model_container">
            <div nz-row nzGutter="16" class="row_3">
                <div nz-col nzSpan="12">
                    <label nz-col nzSpan="4" class="fill_label" style="text-align: right;">单据类型:</label>
                    <div nz-col nzSpan="15" class="fill_control">
                        <nz-select nzDropdownClassName="select_custom" nz-col [(ngModel)]="billType" nzPlaceHolder="单据类别" style="width: 150px;">
                            <!-- <nz-option nzValue="" nzLabel="请选择"></nz-option> -->
                            <nz-option *ngFor="let item of MaterialInBillTypeEnum" [nzValue]="item.key" [nzLabel]="item.value">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>

            <div nz-row nzGutter="16" class="row_3">
                <div nz-col nzSpan="12">
                    <label nz-col nzSpan="4" class="fill_label" style="text-align: right;">备注:</label>
                    <div nz-col nzSpan="15" class="fill_control" style="margin-left: 8px;">
                        <textarea nz-input [nzAutosize]="{ minRows: 5, maxRows: 6 }" maxlength="200" [(ngModel)]="remarks"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div nz-row class="row_2">
        <div nz-row class="operate_btn">
            <button nz-button nzType="primary" (click)="Add()" [disabled]="SpecAddDisabled"
                [class]="SpecAddDisabled?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"><i nz-icon
                    nzType="plus"></i>添加</button>
            <button nz-button nzType="" [disabled]="editDisabled" (click)="Edit()"
                [class]="editDisabled?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"><i nz-icon
                    nzType="edit"></i>编辑</button>
            <button nz-button nzType="" [disabled]="deleteDisabled" (click)="Del()"
                [class]="deleteDisabled?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"><i nz-icon
                    nzType="delete"></i>删除</button>

        </div>
        <nz-table #expandTable [nzData]="listData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="isAllChecked" [nzIndeterminate]="isIndeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                    <th>物料编码</th>
                    <th>物料名称
                    </th>
                    <th>库房</th>
                    <th>库区</th>
                    <th>账户别名
                    </th>
                    <th>工作令
                    </th>
                    <th>单位
                    </th>
                    <th>生产日期
                    </th>
                    <th>供应商批次
                    </th>
                    <th>条码批次
                    </th>
                    <th>包装规格
                    </th>
                    <th>包装量
                    </th>
                    <!-- <th>实际量
                    </th> -->
                    <th>打印条码
                    </th>
                    <th>备注
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of expandTable.data"
                class="tbodyData ant-table-row ng-star-inserted">
                    <td nzShowCheckbox [(nzChecked)]="data.checked"
                        (nzCheckedChange)="SelectRow()">
                    </td>
                    <td style="display: none;">{{ data.materialId }}</td>
                    <td>{{ data.materialCode }}</td>
                    <td>{{ data.materialName }}</td>
                    <td>{{ data.warehouseName }}</td>
                    <td>{{ data.warehouseAreaName }}</td>
                    <td>{{ data.accountAliasName }}</td>
                    <td>{{ data.commandName }}</td>
                    <td>{{ data.unit }}</td>
                    <td>{{ data.productionDate }}</td>
                    <td>{{ data.supplierBatch }}</td>
                    <td>{{ data.codeBatch }}</td>
                    <td>{{ data.packageSpecName }}</td>
                    <td>{{ data.packageNum }}</td>
                    <!-- <td>{{ data.actualNum }}</td> -->
                    <td>{{ data.bucketCode }}</td>
                    <!-- <td>{{ data.materialId }}</td> -->
                    <td>{{ data.remarks }}</td>
                </tr>
            </tbody>
        </nz-table>
        <!-- <div nz-row class="row_4" *ngIf="expandTable.data.length!=0">
            <nz-pagination (nzPageIndexChange)="clickPage($event)" (nzPageSizeChange)="clickSize($event)"
                [(nzPageIndex)]="pageIndex" [nzTotal]="totalSize" [nzShowTotal]="totalTemplate"></nz-pagination>
            <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
        </div> -->
    </div>

    <div nz-row class="custome_modal_footer" class="row_2">
        <div nz-col nzSpan="24" style="text-align: right;">

            <button nz-button nzType="primary" (click)="Save()">提交</button>
            <button nz-button type="button" nzType="default" style="margin-left: 10px;" (click)="Cancel()">取消</button>
        </div>
    </div>
</div>

<div id="modal_box_add"></div>
<nz-modal appDragModal [(nzVisible)]="AddWinIsView" [nzGetContainer]="modalDomBoxAdd" [nzTitle]="modelType==1?'新增':'编辑'" (nzOnCancel)="handleCancel()"
     class="hmodal" nzWidth="700px" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading"  [nzMaskClosable]="false" [nzStyle]="{left:'28%',top:'18%'}">
    <form nz-form [formGroup]="AddForm" >
        <div nz-row class="model_container">
            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>物料编码</nz-form-label>
                        <nz-form-control [nzSpan]="11" nzErrorTip="请输入物料编码">
                            
                            <input nz-input formControlName="materialCode" placeholder="请选择物料编码" disabled />
                        </nz-form-control>

                        <button nz-button  style="margin-top: 4px; margin-left: 5px;" nzType="primary" (click)="showMatModal()">...</button>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">物料名称</nz-form-label>
                        <nz-form-control [nzSpan]="15" >
                            <input nz-input formControlName="materialName"  disabled />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>库房</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请选择库房">
                            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="warehouse"
                                (ngModelChange)="selectedWarehouseModal($event)">
                                <nz-option nzValue="" nzLabel="请选择"></nz-option>
                                <nz-option *ngFor="let item of wareList" [nzValue]="item.warehouseId" [nzLabel]="item.warehouseName">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>库区</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请选择库区">
                            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="warehouseAreaId">
                                <nz-option nzValue="" nzLabel="请选择"></nz-option>
                                <nz-option *ngFor="let item of areaList" [nzValue]="item.warehouseAreaId" [nzLabel]="item.warehouseAreaName">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>包装规格</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请选择包装规格">
                            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="packageSpecId">
                                <nz-option nzValue="" nzLabel="请选择"></nz-option>
                                <nz-option *ngFor="let item of SpecList" [nzValue]="item.id" [nzLabel]="item.spec">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">单位</nz-form-label>
                        <nz-form-control [nzSpan]="15">
                            <input nz-input formControlName="unit" disabled />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item nz-row class="register-area">
                        <nz-form-label [nzSpan]="6" nzRequired>账户别名</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请选择账户别名">
                            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="accountAlias">
                                <nz-option nzValue="" nzLabel="请选择"></nz-option>
                                <nz-option *ngFor="let item of AccountaliasList" [nzValue]="item.id" [nzLabel]="item.alias">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">工作令</nz-form-label>
                        <nz-form-control [nzSpan]="15">
                            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="commandId">
                                <nz-option nzValue="" nzLabel="请选择"></nz-option>
                                <nz-option *ngFor="let item of WorkList" [nzValue]="item.id" [nzLabel]="item.content">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            
            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>条码批次</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请输入条码批次">
                            <input nz-input formControlName="codeBatch" placeholder="请输入条码批次" (ngModelChange)="codeBatchChange($event)" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">供应商批次</nz-form-label>
                        <nz-form-control [nzSpan]="15">
                            <input nz-input formControlName="supplierBatch" placeholder="请输入条码批次" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>打印条码</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请输入打印条码">
                            <input nz-input formControlName="bucketCode" placeholder="请输入打印条码" disabled />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>生产日期</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请输入生产日期">
                            <nz-date-picker nzDropdownClassName="date-range" formControlName="productionDate" nzPlaceHolder="请输入生产日期"
                            (ngModelChange)="onDateChange($event)"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-col nzSpan="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>包装量</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请输入包装量">
                            <nz-input-number formControlName="packageNum" [nzMin]="1" [nzMax]="10000" [nzStep]="1" style="width: 100%;" nzPlaceHolder="请输入包装量"></nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <!-- <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">实际量</nz-form-label>
                        <nz-form-control [nzSpan]="15" nzErrorTip="请输入实际量">
                            <input nz-input formControlName="coverPaperCode" placeholder="请输入实际量" />
                        </nz-form-control>
                    </nz-form-item>
                </div> -->
            </div>
            <div nz-col nzSpan="24">
                <nz-form-label [nzSpan]="3">审批备注</nz-form-label>
                <nz-form-control [nzSpan]="21">
                    <textarea nz-input [nzAutosize]="{ minRows: 5, maxRows: 6 }" maxlength="200"
                        formControlName="remarks"></textarea>
                </nz-form-control>
            </div>
        </div>
        <!-- <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div> -->
    </form>
</nz-modal>
<div id="modal_box"></div>
<nz-modal appDragModal [(nzVisible)]="isMatVisible" [nzGetContainer]="modalDomBox" nzTitle="物料列表" (nzOnCancel)="handlematerielCancel()"
    class="hmodal" [nzOkLoading]="isMatOkLoading" (nzOnOk)="matHandleOk()" nzWidth="600px" [nzMaskClosable]="false" [nzStyle]="{left:'31%',top:'18%'}">
    <div nz-row>
        <div nz-col nzSpan="4" >
            <label class="line-height-32-prefix">物料编码：</label>
        </div>
        <div nz-col nzSpan="6">
            <input type="text" [(ngModel)]="txtAltMatCode" nz-input placeholder="输入物料编码"/>
        </div>
        <div nz-col nzSpan="4">
            <label class="line-height-32-prefix">物料名称：</label>
        </div>
        <div nz-col nzSpan="6">
            <input type="text" [(ngModel)]="txtAltMatName" nz-input placeholder="输入物料名称"/>
        </div>
        <div nz-col nzSpan="4">
            <button nz-button nzType="primary" class="margin-left-16" (click)="getAltMatSearchData()">查询</button>
        </div>
    </div>

    <div nz-row class="margin-top-16">
        <nz-table #altBasicTable [nzData]="altMatListOfData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
            <tr>
                <th>选择</th>
                <th>物料编码</th>
                <th>物料名称</th>
                <!-- <th>规格</th>
                <th>数量</th> -->
                <th>单位</th>
                <!-- <th>单价</th> -->
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of altBasicTable.data">
                <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="altMatCheckSingle(data)"></td>
                <td>
                    <input type="hidden" value="{{data.id}}" />
                    <span>{{ data.code }}</span>
                </td>
                <td>{{ data.name }}</td>
                <!-- <td>{{ data.spac }}</td>
                <td>--</td> -->
                <td>{{ data.unit }}</td>
                <!-- <td>{{ data.price }}</td> -->
            </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="margin-top-16">
        <nz-pagination class="float-right" [nzPageIndex]="altMatPageIndex" (nzPageIndexChange)="altMatClickPage($event)" [nzTotal]="altMatTotalSize" [nzPageSize]="altMatPageSize" [nzSize]="'small'" [nzShowTotal]="altMatTotalTemplate"></nz-pagination>
        <ng-template #altMatTotalTemplate let-total> 总共 {{ altMatTotalSize }} 条 </ng-template>
    </div>
</nz-modal>